<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <meta name="MobileOptimized" content="320"/>
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="../../resources/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="../../resources/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
    <link href="../../resources/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet"
          type="text/css"/>

    <style>
        #btn-search {
            display: inline-block;
            background: #000;
            color: #FFF;
            font-size: 13px;
            line-height: 22px;
            border: none;
        }

    </style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<div class="row">
    <div class="col-md-12">
        <h3 class="page-title" style="padding-left:15px;margin-top:22px">
            商品
            <small>查询</small>
        </h3>
        <hr/>
    </div>

    <div style="padding-left:15px;padding-top:40px">
        <form action="goodsSearch.html" name="form1" method="post" th:action="@{/goods/findProduct}">
            <table class="table table-striped">
                <tr>
                    <th>商品号查询：</th>
                </tr>
                <tr bgcolor="#e7e9e9">
                    <td>商品名称</td>
                    <td><input type="text" name="name"/></td>
                    <td><input id="btn-search" type="submit" value="查询"/></td>
                </tr>
            </table>
        </form>

        <table id="memberDetail" class="table">
            <tr>
                <th>商品详情：</th>
            </tr>
            <tr bgcolor="#e7e9e9">
                <td>商品号</td>
                <td>商品名</td>
                <td>定价</td>
                <td>描述</td>
            </tr>
            <tr bgcolor="#e7e9e9" th:each="product :${products}">
                <td th:text="${product.barcode}">商品号</td>
                <td th:text="${product.productName}">商品名</td>
                <td th:text="${product.setPrice}">定价</td>
                <td th:text="${product.description}">描述</td>
            </tr>
        </table>
        <!--分页导航-->
        <div id="bottomTool" class="row-fluid">



            <!--分页-->
            <div class="span6" style="float:left;margin-left:120px;margin-top:-8px">
                <div class="dataTables_paginate paging_bootstrap pagination">
                    <ul id="previousNext">
                        <li  class="prev disabled" style="float:left"><a id="previousPage" href="#" onclick="prePage()">上一页</a></li>
                        <div id="page" style="float:left;width:60px">
                            <select id="pageNum" onChange="search()" aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length" style="margin-top:-2px">
                                <option th:each="i : ${#numbers.sequence( 1, page.totlePage, 1)}" th:value="${i}" th:text="${i}" th:selected="${i} == ${page.currentPage}" selected="selected" value="1">1</option>
                            </select>
                        </div>
                        <li class="next" style="float:left"><a id="nextPage" href="#" onclick="nextPage()">下一页</a></li>
                    </ul>
                </div>
            </div>



            <!--选择每页多少行-->
            <div class="span6" style="float:left;margin-left:200px">
                <div class="dataTables_length" id="DataTables_Table_0_length">
                    <label>每页
                        <select id="pageSize" onChange="research()" aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length">
                            <option th:selected="5 == ${page.pageSize}" value="5">5</option>
                            <option th:selected="10 == ${page.pageSize}" value="10">10</option>
                            <option th:selected="25 == ${page.pageSize}" value="25">25</option>
                        </select>
                        条记录
                    </label>
                </div>
            </div>
            <div class="span6" style="float:left;margin-left:40px">
                <div id="DataTables_Table_0_info" class="dataTables_info" style="font-size:15px">共<span th:text="${page.totlePage}">1</span>页/共<span th:text="${page.totleNumber}">57</span>项</div>
            </div>

        </div>

        <form id="hideForm" action="memberSearch.html" method="post" th:action="@{/link/goodsSearch}" hidden="hidden">
            <input id="hideCurrentPage" name="currentPage" th:value="${page.currentPage}" />
            <input id="hidePageSize" name="pageSize" th:value="${page.pageSize}" />
            <input id="hideMaxPage" name="maxPage" th:value="${page.totlePage}" />
        </form>
    </div>
</div>
<script src="../../resources/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    // <![CDATA[

    function search() {
        var currentPage = $("#pageNum option:selected").text();
        console.log(currentPage);
        var pageSize = $("#pageSize option:selected").text();
        console.log(pageSize);
        $("#hideCurrentPage").val(currentPage);
        $("#hidePageSize").val(pageSize);
        $("#hideForm").submit();
    }

    function research(){
        var pageSize = $("#pageSize option:selected").text();
        console.log(pageSize);
        var currentPage = 1;
        $("#hideCurrentPage").val(currentPage);
        $("#hidePageSize").val(pageSize);
        $("#hideForm").submit();
    }

    /**
     * 上一页
     */
    function prePage() {
        var currentPage = $("#hideCurrentPage").val();
        var pageSize = $("#hidePageSize").val();
        if (currentPage == 1) {
            //已经是第一页
            return;
        }
        currentPage--;
        $("#hideCurrentPage").val(currentPage);
        $("#hidePageSize").val(pageSize);
        $("#hideForm").submit();
    }

    /**
     * 下一页
     */
    function nextPage() {
        var currentPage = $("#hideCurrentPage").val();
        var pageSize = $("#hidePageSize").val();
        var maxPage = $("#hideMaxPage").val();
        if (currentPage == maxPage) {
            //已经是最后一页
            return;
        }
        currentPage++;
        $("#hideCurrentPage").val(currentPage);
        $("#hidePageSize").val(pageSize);
        $("#hideForm").submit();
    }
    // ]]>
</script>
</body>

</html>
